<template>
  <div class="index-container">
    <NavBar :active-index="'3'" />
    <div class="page__cont">
      <el-row>
        <el-button plain type="primary" @click="() => goLink(1)">
          申报管理
        </el-button>
      </el-row>
      <el-row>
        <el-button plain type="primary" @click="() => goLink(2)">
          代课明细
        </el-button>
      </el-row>
      <el-row>
        <el-button plain type="primary" @click="() => goLink(3)">
          报表下载
        </el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
  import NavBar from '../components/NavBar.vue'
  import { useUserStore } from '@/store/modules/user'
  import router from '@/router'
  export default defineComponent({
    name: 'Index',
    components: {
      NavBar,
    },
    setup() {
      const userStore = useUserStore()
      const { userId } = userStore
      console.log(userId)

      const state = reactive({})

      const goLink = (index) => {
        if (index === 1) {
          router.push({ path: '/manager/dksblist' }).then(() => {})
        } else if (index === 2) {
          router.push({ path: '/manager/courselist' }).then(() => {})
        } else if (index === 3) {
          router.push({ path: '/manager/reportlist' }).then(() => {})
        }
      }

      return {
        ...toRefs(state),
        goLink,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .index-container {
    .page__cont {
      padding: 20px;
      .el-row {
        margin: 20px auto;
        &:first {
          margin-top: 40px;
        }
        .el-button {
          width: 80%;
          height: 50px;
          margin: 0 auto;
        }
      }
    }
  }
</style>
